<template>
  <div class="home">
    <el-container>
      <el-aside width="200">
        <el-menu
          :default-active="$router.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <!-- 使用qf-sub-menu插件,注入sideMenu数据从store中映射的menuList -->
          <qf-sub-menu :sideMenu="menuList"></qf-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row :gutter="20">
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <i
                  class="el-icon-s-fold"
                  v-if="isCollapse"
                  @click="isCollapse = !isCollapse"
                ></i>
                <i
                  class="el-icon-s-unfold"
                  v-else
                  @click="isCollapse = !isCollapse"
                ></i></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <h1>万和管理系统</h1>
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-avatar :src="circleUrl"></el-avatar>
                <span>得得得得得得得得:</span>
                <b @click="toMine($router.push('/Mine'))">{{ userInfo.nickname }}</b>
                <span class="quiet" @click="quiet">退出</span>
              </div></el-col
            >
          </el-row>
        </el-header>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Welcome' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              :to="{ path: crumb.path }"
              v-for="crumb in crumbs"
              :key="crumb.name"
              >{{ crumb.meta.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//从api中导入getLoginLog方法
import { getLoginLog } from "@/api";
//从vuex中导入mapState
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: true,
      circleUrl:
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2432523458,3358267951&fm=26&gp=0.jpg",
      sizeList: ["large", "medium", "small"]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    quiet() {
      //退出登录
      //清除token,userInfo
      localStorage.removeItem("bms-token");
      localStorage.removeItem("bms-userInfo");
      localStorage.removeItem("bms-permission-button");
      //退回登录页
      //刷新页面
      location.reload();
      this.$router.push("/login");
    },
  },
  mounted() {
    //调试获取登录日志
    // getLoginLog().then(res => {
    //   console.log(res);
    // });
  },
  computed: {
    ...mapState(["userInfo", "menuList", "crumbs"])
  }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
  line-height: 60px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/* .el-avatar{
    margin:10px 10px;
  } */
.el-col {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.el-col b {
  line-height: 40px;
}
.quiet {
  cursor: pointer;
  color: hotpink;
  font-size: 0.1rem;
}
</style>
